<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/vue-router.js"></script>
</head>
<body>
    <div id="app" style="border:1px dashed yellow">
        <!-- 添加路由链接 -->
        <router-link to="/index">首页</router-link>
        <router-link to="/products/1">科幻</router-link>
        <router-link to="/products/2">悬疑</router-link>
        <router-link to="/products/3">恐怖</router-link>
        <!-- 添加组件的展示区域 -->
        <router-view></router-view>
    </div>
</body>
<script>
    // 创建组件
    var  Index = Vue.component('index',{
        template:`<div>这里是首页</div>`
    })
    var  kehuan = Vue.component('kehuan',{
        template:`<div>这里是科幻分类页</div>`
    })
    var  xuanyi = Vue.component('xuanyi',{
        template:`<div>这里是悬疑分类页</div>`
    })
    var  kongbu  = Vue.component('kongbu',{
        template:`<div>这里是恐怖分类页</div>`
    })
    var  Product = Vue.component('product',{
        template:`<div style=" border: 1px solid red">
                    <h1>类型</h1>
                    <h3>{{info}}</h3>
                    <button @click='show'>点击加载</button>
                    <router-view style="border: 1px dashed blue"></router-view>
                  </div>`,
        data(){
            return{
                info:"??"
            }
        },
        watch: {
          $route(to,from){
              var id = to.params.id;
              if(id==1){
                  this.info='这是科幻类分类页面'
              }else if(id==2){
                this.info="这是悬疑类分类页面"
            }else if(id==3){
                this.info="这是恐怖类分类页面"
            }
          }  
        },
        mounted () {
            var id = this.$route.params.id;
            if(id==1){
                this.info="这是科幻类分类页面"
            }else if(id==2){
                this.info="这是悬疑类分类页面"
            }else if(id==3){
                this.info="这是恐怖类分类页面"
            }
        },
        methods: {
            show(){
                var id = this.$route.params.id;
                if(id==1){
                    this.$router.push({name:'kehuan'})
                }else if(id==2){
                    this.$router.push({name:'xuanyi'})
                }else if(id==3){
                    this.$router.push({name:'kongbu'})
                }
            }
        }
    })
    // 创建路由实例
    var router= new VueRouter({
        // 配置路由
        routes:[
            {name:'index',path:'/index',component:Index},
            {name:'product',path:'/products/:id',component:Product,
            children:[
                {name:'kehuan',path:'kehuan',component:kehuan},
                {name:'xuanyi',path:'xuanyi',component:xuanyi},
                {name:'kongbu',path:'kongbu',component:kongbu},

            ]
            },
        ]
    })
    var vm = new Vue({
        el:"#app",
        router:router,
        data:{

        }
    })
</script>
</html>